/**
 * Created by wfle on 2018/8/19.
 */

import React, { Component } from 'react';
import {
	StyleSheet, Text, View,
	TouchableOpacity, FlatList
} from "react-native";
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { StockTop, StockRow } from '../../../component/Stock.js';
import { Common } from '../../../component/common/Common';

const scale = GLOBAL.SCALE;

export class StockDetailPage extends Component {

	static navigationOptions = ({ navigation }) => {
		let { state, goBack } = navigation;
		const headerTitle = state.params ? state.params.title : "";
		return {
			headerTitle,
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerStyle: {
				elevation: 0,
				backgroundColor: style.color.themeColor,
			},
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center'
			}
		}
	};

	constructor(props) {
		super(props);
		this.state = {
			loaded: true,
			status: '',
			warehouseName: '',
			dataSource: [],
		}
		this._renderItem = this._renderItem.bind(this);
	}

	componentWillMount () {

	}

	async componentDidMount () {
		const { planId } = this.props.navigation.state.params;
		const plan = await this._fetchPlanAsync(planId);
		const loaded = false;
		if (plan) {
			const { inventoryStandBookVOS, warehouseName, status } = plan;
			if (inventoryStandBookVOS) {
				this.setState({
					dataSource: inventoryStandBookVOS,
					loaded,
					status,
					warehouseName,
				});
			}
		} else {
			this.setState({
				loaded
			});
		}
	}

	/**
 * 返回plan
* @param {String} planId
		*/
	async _fetchPlanAsync (planId) {
		const sendData = { planId };
		const responseData = await HTTP.POST(API_GENERATE(API.GET_STOCKPLAN_DETAIL), sendData);
		return responseData;
	}

	render () {
		const { status, warehouseName } = this.state;
		const leftText = `仓库：${warehouseName}`;
		const rightText = `${status}`;
		const renderDataView = this.renderData();
		return (
			<View style={styles.container}>
				<View style={{ flex: 1, }}>
					<StockTop leftText={leftText} rightText={rightText} />
					{renderDataView}
				</View>
				<View style={styles.circleBtnCell}>
					<TouchableOpacity style={styles.circleBtn} onPress={this._didPressBeginBtn.bind(this)} activeOpacity={0.5} >
						<Text style={styles.circleBtnText}>{'开始'}</Text>
					</TouchableOpacity>
				</View>

			</View>
		);
	}

	/* 渲染列表 */
	renderData () {
		if (this.state.loaded) {
			return (
				<PageStatusIndex status={'loading'} />
			);
		} else {
			if (this.state.dataSource.length) {
				return (
					<FlatList
						data={this.state.dataSource}
						renderItem={this._renderItem}
						style={styles.flatList}
					/>
				);
			} else {
				return (
					<PageStatusIndex status={'empty'} title={''} />
				);
			}
		}

	}

	_renderItem (inventoryStandBookVOS) {
		const { goodsName, onhandQuantity } = inventoryStandBookVOS.item;

		return (
			<StockRow height={58} strList={[`商品：${goodsName}`, `台账数量：${onhandQuantity}`]} style={[{ marginBottom: 12 * scale, backgroundColor: '#fff', }]} />
		);
	}

	async _didPressBeginBtn () {
		const { navigate } = this.props.navigation;
		const { planId, title } = this.props.navigation.state.params;
		const sendData = { planId };
		await HTTP.POST(API_GENERATE(API.CHECK_STOCKPLAN_BEGIN), sendData);
		navigate('StockEditPage', {
			title,
			planId,
		});
	}

}


const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
	},
	stockRow: {
		marginBottom: 12 * scale,
		backgroundColor: '#fff',
	},
	flatList: {
		marginTop: 12 * scale,
		backgroundColor: '#F5F5F5',
	},
	circleBtnCell: {
		alignItems: 'center',
		width: 375 * scale,
		height: 109 * scale,
		// position: 'absolute',
		// left: 0,
		// bottom: 0,
	},
	circleBtn: {
		width: 80 * scale,
		height: 80 * scale,
		backgroundColor: style.color.themeColor,
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 50,
	},
	circleBtnText: {
		fontSize: 22 * scale,
		color: '#fff'
	},
});